<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('断面列表')">
	<meta charset="UTF-8">
</head>
<body>
<div style="width: 98%; margin-left: 1%;" id="mainDiv">
<ul class="breadcrumb" style="margin-bottom: 0px; background-color: #fff;">
	<li><a href="javascript:;">输水工程</a></li>
	<li class="active">断面信息</li>
</ul>
<!-- 条件参数查询start -->
<div style="margin-top: 20px;margin-bottom: 25px; width: 100%; float: left; font-family: '宋体';">
	<div style="width: 50px; float: left;"><font style="margin-top: 8px; float: left; font-size: 18px;">名称</font></div>
	<div style="width: 150px; float: left;">
		<input type="text" v-model="paramJson.name" class="form-control" style="width: 150px;"/>
	</div>
	<div style="float: left; margin-left: 10px;">
		<button class="btn btn-primary" @click="searchList">查询</button>
		<button class="btn btn-primary" @click="resetValue">重置</button>
	</div>
</div>
<!-- 条件参数查询end -->
<div>
	<button @click="addData()" class="btn btn-primary">添加断面</button>
</div>
<!-- 数据列表的显示start -->
<div class="listDataTableStyle" style="min-width: 1000px;">
	<table cellpadding="0" cellspacing="0" width="100%">
		<thead>
		<tr>
			<th style="width: 3%;">序号</th>
			<th style="width: 60%;">名称</th>
			<th style="width: 10%;">系统编号</th>
			<th style="width: 10%;">桩号</th>
			<th style="width: 10%;">所属渠道</th>
			<th style="width: 7%;">操作</th>
		</tr>
		</thead>
		<tbody>
		<tr v-show="responseData.length != 0" v-for="(data, index) in responseData">
			<td>{{index+1}}</td>
			<td>{{data.name}}</td>
			<td>T101</td>
			<td>{{data.mileage}}</td>
			<td>{{data.canalSystemName}}</td>
			<td>
				<span class="label label-info" style="cursor: pointer;" @click="modify(data.id)">修改</span>
				<span class="label label-danger" style="cursor: pointer;" @click="del(data.id)">删除</span>
			</td>
		</tr>
		<tr v-show="responseData.length == 0">
			<td colspan="6">暂无数据</td>
		</tr>
		</tbody>
	</table>
</div>
<!-- 数据列表的显示end -->
<!-- 分页start -->	
<table width="100%">
	<tr>
		<td width="50%">
			<div class="pagin" style="margin-top: 0px !important;">
				<div style="font-size: 14px; font-family: Helvetica Neue,Helvetica,Arial,sans-serif">共&nbsp;<i style="color: blue;" class="htmlTotalElements">{{paginationJson.total}}</i>&nbsp;条记录，当前第&nbsp;<i style="color: blue;"class="htmlPageNumber" >{{paginationJson.number + 1}}</i>&nbsp;页
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;每页数据:<select class="selectPageSize" v-model="paginationJson.size" @change="paginationSize">
						<option value="10">10</option>
						<option value="20">20</option>
						<option value="50">50</option>
						<option value="200">200</option>
						<option value="1000">1000</option>
					</select>
				</div>
			</div>
		</td>
		<td>	
			<div id="Pagination" class="pagination" style="float:right;margin-right:20px;"></div>
		</td> 
	</tr>
</table>
<!-- 分页end -->
</div>
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
const BASE_PATH = [[@{/}]];
const URLS = {
	PAGE_URLS: {
		ADD: BASE_PATH + '/router/waterdelivery/canalSystemSection/add'
	},
	API_URLS: {
		LIST: BASE_PATH+'/v1/restful/canalSystemSection/list',
		DELETE: BASE_PATH+'/v1/restful/canalSystemSection/deleteForce/'
	}
};
var reqLayerIndex = -1;
axios.interceptors.request.use(function (config) {
	reqLayerIndex = layer.load();
	return config;
}, function (error) {
	return Promise.reject(error);
});
axios.interceptors.response.use(function(response) {
	layer.close(reqLayerIndex);
	return response;
}, function (error) {
	return Promise.reject(error.response);
});
var app = new Vue({
	el: '#mainDiv',
	data: {
		title: '断面',
		responseData: [],
		paginationJson: {
			total: 0,
			number: 0,
			size: 10
		},
		paramJson: {
			name: ''
		}
	},
	methods: {
		init: function(reqjson) {
			let _this = this;
			axios.post(URLS.API_URLS.LIST, reqjson)
			.then(function (res) {
				data = res.data;
				console.log(data);
				if (data.code == 200) {
					data = data.data;
					app.responseData = data.content;
					app.$set(app.paginationJson, 'total', data.total);
					app.$set(app.paginationJson, 'number', data.number);
					app.$set(app.paginationJson, 'size', data.size);
					_this.pagination();
				}
			}).catch(function (error) {
			});
			
		},
		searchList: function() {
			let reqParamJson = {
				number: 0,
				size: app.paginationJson.size,
				entity: app.paramJson
			};
			console.log(reqParamJson)
		},
		addData: function() {
			layer.open({
				type: 2,
				title: '添加'+app.title,
				shadeClose: false,
				area: ['90%', '90%'],
				shade: 0.2,
				maxmin: true,
				content: URLS.PAGE_URLS.ADD,
				end: function() {
					app.init();
				}
			});
		},
		paginationSize: function() {
			this.$set(this.paginationJson, 'number', 0);
			this.pagination();
		},
		pagination: function() {
			$("#Pagination").pagination(this.paginationJson.total, {
				"num_edge_entries" : 2,
				"num_display_entries" : 5,
				"callback" : this.pageselectCallback,
				"current_page" : this.paginationJson.number,
				"items_per_page" : this.paginationJson.size
			});
		},
		pageselectCallback: function(number) {
			this.$set(this.paginationJson, 'number', number);
		},
		modify: function(id) {
			layer.open({
				type: 2,
				title: '修改'+app.title,
				shadeClose: false,
				area: ['90%', '90%'],
				shade: 0.2,
				maxmin: true,
				content: URLS.PAGE_URLS.ADD + '?id=' + id,
				end: function() {
					app.init();
				}
			});
		},
		del: function(id) {
			layer.confirm('确定删除该记录吗？', {
				btn: ['确定', '取消']
			}, function() {
				axios.get(URLS.API_URLS.DELETE+id)
				.then(function (res) {
					data = res.data;
					if (data.code == 200) {
						layer.msg('删除成功', {icon: 1});
						app.init(app.paramJson);
					} else {
						layer.msg('删除失败', {icon: 1});
						app.init();
					}
				}).catch(function (error) {
				});
			});
		},
		resetValue: function() {
			
		}
	},
	mounted: function() {
		this.init({});
	}
});
app.pagination();
</script>
</html>